<template>
  <el-dialog
    v-model="dialogVisible"
    :title="file?.name"
    width="80%"
    fullscreen
  >
    <div class="preview-container">
      <!-- 图片预览 -->
      <div v-if="isImage" class="image-preview">
        <el-image
          :src="previewUrl"
          fit="contain"
          :preview-src-list="[previewUrl]"
        />
      </div>

      <!-- 视频预览 -->
      <div v-else-if="isVideo" class="video-preview">
        <video
          :src="previewUrl"
          controls
          class="video-player"
        />
      </div>

      <!-- PDF预览 -->
      <div v-else-if="isPDF" class="pdf-preview">
        <iframe
          :src="previewUrl"
          frameborder="0"
          class="pdf-viewer"
        />
      </div>

      <!-- 文本预览 -->
      <div v-else-if="isText" class="text-preview">
        <el-scrollbar height="calc(100vh - 200px)">
          <pre>{{ textContent }}</pre>
        </el-scrollbar>
      </div>

      <!-- 其他文件类型 -->
      <div v-else class="no-preview">
        <el-empty description="该文件类型暂不支持预览">
          <el-button type="primary" @click="handleDownload">
            下载文件
          </el-button>
        </el-empty>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleDownload">
          下载
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getFilePreview, downloadFile } from '@/api/file'

const props = defineProps({
  modelValue: Boolean,
  file: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const previewUrl = computed(() => {
  if (!props.file) return ''
  return `${import.meta.env.VITE_API_URL}/api/file/preview/${props.file.id}`
})

const textContent = ref('')

// 判断文件类型
const isImage = computed(() => {
  return props.file?.type === 'image'
})

const isVideo = computed(() => {
  return props.file?.type === 'video'
})

const isPDF = computed(() => {
  return props.file?.type === 'pdf'
})

const isText = computed(() => {
  return props.file?.type === 'text'
})

// 加载文本内容
const loadTextContent = async () => {
  if (!props.file || !isText.value) return
  
  try {
    const res = await getFilePreview(props.file.id)
    textContent.value = res.data.content
  } catch (error) {
    ElMessage.error('加载文件内容失败')
  }
}

// 处理下载
const handleDownload = async () => {
  if (!props.file) return
  
  try {
    await downloadFile(props.file.id)
  } catch (error) {
    ElMessage.error('下载失败')
  }
}

// 监听对话框打开，加载文本内容
watch(() => dialogVisible.value, (val) => {
  if (val && isText.value) {
    loadTextContent()
  }
})
</script>

<style scoped>
.preview-container {
  height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview, .video-preview, .pdf-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-player {
  max-width: 100%;
  max-height: 100%;
}

.pdf-viewer {
  width: 100%;
  height: 100%;
}

.text-preview {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #f5f7fa;
}

.text-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.no-preview {
  padding: 40px;
}
</style> 